<script setup>
import { ref, watch } from 'vue'

const usage = ref(0)
const totalCost = ref(null)

watch(usage, remaining => {
  if (remaining <= 0) return (totalCost.value = 0)
  if (remaining <= 2160) return (totalCost.value = remaining * 0.6)
  if (remaining >= 2160 && remaining <= 4200) return (totalCost.value = remaining * 0.65)
  if (remaining > 4200) return (totalCost.value = remaining * 0.9)
})
</script>

<template>
  <main class="w-xs rounded-2xl bg-white p-6 shadow">
    <h2 class="mb-4 text-center text-xl font-bold">阶梯电价计算器</h2>

    <section class="mb-4">
      <label class="font-bold">年用电量（千瓦时）</label>
      <input v-model.number="usage" type="number" min="0" class="mt-2 w-full rounded border p-2" />
    </section>

    <button class="btn w-full border-none !bg-blue-500 py-2 text-white hover:!bg-blue-600">请输入年用电量</button>

    <section v-if="totalCost" class="mt-4 text-center">
      <p class="text-lg">
        应付电费：<strong>{{ totalCost.toFixed(2) }}</strong> 元
      </p>
    </section>
  </main>
</template>
